import { Form, Input } from "antd";
import { useAuth } from "../context/auth-context";
import { LongButton } from "unauthenticated-app";
import {useAsync} from '../utils/use-async';
import {useDocumentTitle} from '../utils';

export const RegisterScreen = ({onError}: {onError: (error: Error) => void}) => {
  const { register } = useAuth();
  const {run, isLoading} = useAsync(undefined, {throwOnError: true})

  const handleSubmit = ({cPassword, ...values}: { username: string; password: string; cPassword: string }) => {
    if (cPassword !== values.password) {
      onError(new Error('两次密码不一致'))
      return
    }
    run(register(values)).catch((e) => {
      onError(e)
    })
  };

  useDocumentTitle('注册')

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item
        name={"username"}
        rules={[{ required: true, message: "请输入用户名" }]}
      >
        <Input placeholder={"用户名"} type="text" id={"username"} />
      </Form.Item>
      <Form.Item
        name={"cPassword"}
        rules={[{ required: true, message: "请输入密码" }]}
      >
        <Input placeholder={"确认密码"} type="password" id={"cPassword"} />
      </Form.Item>
      <Form.Item
        name={"password"}
        rules={[{ required: true, message: "请确认密码" }]}
      >
        <Input placeholder={"密码"} type="password" id={"password"} />
      </Form.Item>
      <Form.Item>
        <LongButton loading={isLoading} htmlType={"submit"} type={"primary"}>
          注册
        </LongButton>
      </Form.Item>
    </Form>
  );
};
